<template>
  <el-dialog title="查看记录" :visible.sync="dialogVisible" width="1000px">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="扣款记录" name="deduct">
        <el-table :data="tableData" border>
          <el-table-column align="center" label="期数" width="70">
            <template slot-scope="scope">
              <span>第{{ scope.row.which_period }}期</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="租期">
            <span>{{ viewItem.begin_time }}至{{ viewItem.end_time }}</span>
          </el-table-column>
          <el-table-column align="center" label="金额" prop="rent" />
          <el-table-column align="center" label="支付状态">
            <template slot-scope="scope">
              <span>{{ scope.row.lease_status }}</span>
              <!-- <el-tag :type="scope.row.status>0?'success':'danger'">{{scope.row.status==1?'已支付':scope.row.status==2?'已退款':scope.row.status==3?'已买断':'未支付'}}</el-tag> -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="扣款时间" prop="create_time" />
          <el-table-column align="center" label="支付流水号" prop="out_trade_no" />
          <el-table-column align="center" label="扣款状态" prop="pay_type_status" />
          <el-table-column align="center" label="原因" prop="failReason" width="180" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="短信记录" name="msg">
        <el-table :data="smsData" border>
          <el-table-column align="center" label="发送时间" width="100" prop="create_time" />
          <el-table-column align="center" prop="content" label="发送内容" />
          <el-table-column align="center" label="发送状态" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.send_status == 1 ? '发送成功' : '发送失败' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="原因" prop="reason" width="180" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getLeaseFlow, getOverdueSmsLog } from '@/api/finance'
export default {
  // props: ['viewItem'],
  props: {
    viewItem: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      activeName: 'deduct',
      dialogVisible: false,
      tableData: [],
      smsData: []
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getDeduct()
      } else {
        this.activeName = 'deduct'
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.name
      if (this.activeName === 'deduct') {
        this.getDeduct()
      } else {
        this.getSmsLog()
      }
    },
    getSmsLog() {
      getOverdueSmsLog(this.viewItem.trade_no).then(res => {
        this.smsData = res || []
      })
    },
    getDeduct() {
      const { order_id, lease_id } = this.viewItem
      getLeaseFlow({
        orderId: order_id,
        leaseId: lease_id
      }).then(res => {
        this.tableData = res || []
      })
    }
  }
}
</script>

<style>
</style>
